@dock-background-color: #fff;
@dock-size: 64px;
@dock-size-sm: 40px;
@current-scale: 1.6;
@current-margin: 1rem;

.center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mac-dock {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: fade(@dock-background-color, 30%);
  border: 1px solid fade(@dock-background-color, 50%);
  border-radius: 5px 5px 0 0;

  .center();

  &-container {
    position: absolute;
    .center();
  }

  &-placement-top,
  &-placement-bottom {
    width: 100%;
  }

  &-placement-top {
    top: 0;

    .mac-dock-item {
      transform-origin: center top;
    }
  }

  &-placement-bottom {
    bottom: 0;

    .mac-dock-item {
      transform-origin: center bottom;
    }
  }

  &-placement-left,
  &-placement-right {
    height: 100%;

    .mac-dock {
      flex-direction: column;
      &-item {
        &-current {
          transform: scale(@current-scale);
          margin: @current-margin 0;
        }

        &-prev,
        &-next {
          transform: scale(@current-scale - 0.2);
          margin: @current-margin - 0.2 0;

          &-second {
            transform: scale(@current-scale - 0.4);
            margin: @current-margin - 0.4 0;
          }
        }
      }
    }
  }

  &-placement-left {
    left: 0;

    .mac-dock-item {
      transform-origin: left center;
    }
  }

  &-placement-right {
    right: 0;

    .mac-dock-item {
      transform-origin: right center;
    }
  }

  &-item {
    width: @dock-size;
    height: @dock-size;
    cursor: pointer;
    padding: 0.5rem;
    transition: all 0.2s;

    &&-small {
      width: @dock-size-sm;
      height: @dock-size-sm;
    }

    &-current {
      transform: scale(@current-scale);
      margin: 0 @current-margin;
    }

    &-prev,
    &-next {
      transform: scale(@current-scale - 0.2);
      margin: 0 @current-margin - 0.2;

      &-second {
        transform: scale(@current-scale - 0.4);
        margin: 0 @current-margin - 0.4;
      }
    }

    img {
      width: 100%;
    }
  }
}
